<template>
<div class="opening-record">
    <div class="opening-record-nav">
        <div class="opening-record-nav-content">
            <a :href="'shoplist_pro.php?pid='+param.pid"><img src="./img/vector.png" alt="" /></a>
            <span>服务记录</span>
        </div>
    </div>
    <div class="opening-record-info" v-if="titleData">
        <img class="left" :src="isImg()" alt="" />
        <div class="right">
            <p class="name">{{ titleData.shopname }}</p>
            <div class="details">
                <p class="date"><span v-show="this.titleData.expire_time!=0">有效期至{{titleData.time}}</span></p>
                <p class="infos">
                    <span>店铺授权服务</span>
                    <span :class="['status',isStatus().color]">{{isStatus().text}}</span>
                </p>
                <!-- <p class="infos">
                    <span>店铺置休服务</span>
                    <span :class="isStatus().text=='已到期'?'status danger':'status'">{{isStatus().text=='已到期'?'已到期':'生效中'}}</span>
                </p>
                <p class="infos">
                    <span>预约单设置服务</span>
                    <span :class="isStatus().text=='已到期'?'status danger':'status'">{{isStatus().text=='已到期'?'已到期':'生效中'}}</span>
                </p> -->
            </div>
        </div>
    </div>
    <!-- 列表 -->
    <van-list class="opening-record-list" v-model="loading" :finished="finished" @load="moreLoad" :immediate-check="false" offset="100">
        <li :class="['item', { last: index == list.length - 1 },{first:index == 0}]" v-for="(item, index) in list" :key="item.id">
            <div class="left">{{ item.created_time }}</div>
            <div class="right">
                <p class="name">{{ item.typeStr }}</p>
                <p :class="['time', { red: item.type == -1 }]" v-if="item.buy_month!=0&&item.buy_month">
                    {{ isType(item) }}：{{ item.buy_month }}个月
                </p>
                <p class="info" v-if="item.buy_month!=0&&item.buy_month">
                    服务有效期：{{ item.effect_month }}个月
                    <span v-if="item.history_month && item.history_month != 0">（含历史服务时长{{ item.history_month }}个月）</span>
                </p>
            </div>
        </li>
        <span class="not-message" v-if="list.length == 0">暂无记录</span>
    </van-list>
</div>
</template>

<script>
import request from "@util/request";
import {
    FormatDateTime,
    FormatDateTimes,
    apiUrl,
    getRequest
} from "@util/index";
import qs from "qs";
import img from "./img/icon.png"
export default {
    data() {
        return {
            param: {},
            list: [],
            total: 0,
            loading: false,
            page: 1,
            finished: false,
            titleData: null,
            img
        };
    },
    methods: {
        // 判断头像        
        isImg() {
            if (this.titleData && this.titleData.shopimg) {
                return this.titleData.shopimg
            } else {
                return this.img
            }
        },
        // 各类服务状态
        isStatus() {
            let type = {
                color: "",
                text: ""
            }
            let titleData = this.titleData
            if (this.out_date(titleData.expire_time)) {
                type.text = "已到期"
                type.color = "danger"
            } else if (titleData.is_shenhe == 3) {
                type.text = "授权失效"
                type.color = "danger"
            } else if (!this.out_date(titleData.expire_time) && titleData.buy_type == 1) {
                type.text = "使用中"
                type.color = ""
            } else if (!this.out_date(titleData.expire_time) && titleData.buy_type == 2) {
                type.text = "试用中"
                type.color = "green"
            }
            return type
        },
        // 判断服务状态
        isServerStatus() {
            let time =
                this.titleData.expire_time - parseInt(new Date().getTime() / 1000);
            if (!this.titleData.expire_time || time <= 0) {
                return false;
            } else {
                return true;
            }
        },
        out_date(time) {
            let _time = parseInt(time);
            let currenttime = parseInt(new Date().getTime() / 1000);
            if (_time < currenttime) {
                return true;
            }
        },
        // 判断类型
        isType(item) {
            if (item.type == -1) {
                return "时长";
            } else if (item.type == 1) {
                return "时长";
            } else {
                return "时长";
            }
        },
        // 翻页
        moreLoad() {
            this.page++;
            this.loading = true;
            this.initList();
        },
        initList() {
            request({
                method: "POST",
                url: apiUrl,
                headers: {
                    "Content-Type": "application/x-www-form-urlencoded",
                },
                data: {
                    action: "ShopService_getShopLogList",
                    page: this.page,
                    epoid: parseInt(this.param.epoid),
                    pid: 2,
                },
                transformRequest: [
                    function (data) {
                        return qs.stringify(data);
                    },
                ],
            }).then((res) => {
                let _data = res.data;
                if (_data.ret == 0) {
                    _data.data.map((item) => {
                        item.created_time = FormatDateTimes(item.created_at)
                    });
                    this.list.push(..._data.data);
                    this.loading = false;
                    if (_data.data.length < 10) {
                        this.finished = true;
                    }
                }
            });
        },
        initTitle() {
            request({
                method: "POST",
                url: apiUrl,
                headers: {
                    "Content-Type": "application/x-www-form-urlencoded",
                },
                data: {
                    action: "User_getShopInfoById",
                    sid: this.param.sid,
                    pid: 2,
                },
                transformRequest: [
                    function (data) {
                        return qs.stringify(data);
                    },
                ],
            }).then((res) => {
                let _data = res.data;
                if (_data.ret == 0) {
                    this.titleData = _data.data;
                    if (this.titleData.expire_time) {
                        this.titleData.time = FormatDateTime(
                            this.titleData.expire_time,
                            true
                        );
                    }
                }
            });
        },
    },
    mounted() {
        this.param = getRequest()
        this.initList();
        this.initTitle();
    },
};
</script>

<style lang="less">
@import "index.less";
</style>
